<template>
  <div v-cloak>
    <table cellpadding="7" cellspacing="3" border="1">
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>新增时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in search(keywords)" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.time }}</td>
        <td><a @click.prevent="del(i)" style="cursor: pointer">删除</a></td>
      </tr>
      <tr>
        <td><input type="text" placeholder="请输入学号" v-model="id" /></td>
        <td><input type="text" placeholder="请输入姓名" v-model="name" /></td>
        <td>
          <input type="text" placeholder="搜索学生姓名" v-model="keywords" />
        </td>
        <td><input type="button" value="新增" @click="add" /></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      name: "",
      keywords: "", //用户输入搜索的学生姓名
      list: [
        {
          id: 1,
          name: "小明",
          time: new Date(),
        },
        {
          id: 2,
          name: "小红",
          time: new Date(),
        },
        {
          id: 3,
          name: "小刚",
          time: new Date(),
        },
      ],
    };
  },
  methods: {
    add() {
      let stu = {
        id: this.id,
        name: this.name,
        time: new Date(),
      };
      this.list.push(stu);
      this.id = this.name = "";
    },
    del(i) {
      console.log(i);
      this.list.splice(i, 1);
    },
    search(keywords) {
      var newList = [];
      this.list.forEach((item) => {
        if (item.name.indexOf(keywords) != -1) newList.push(item);
      });
      return newList;
    },
  },
};
</script>

<style></style>
